<template>
  <div class="app-container">
    <el-row>
        <el-col :span="4">
            <div class="grid-content bg-purple serchInput">
                <el-input v-model="userId" placeholder="请输入用户ID"></el-input>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light serchInput">
                <el-input v-model="name" placeholder="请输入微信昵称"></el-input>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light serchInput">
                 <el-button type="primary" icon="el-icon-search" @click="searchData">主要按钮</el-button>
            </div>
        </el-col>
        <!-- <el-col :span="4"><div class="grid-content bg-purple-light">4</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div>5</el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light">6</div></el-col> -->
      </el-row>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading"
      height="500" border fit highlight-current-row>
      <!-- <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="" height="60">
        </template>
      </el-table-column> -->
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      
      <el-table-column label="微信昵称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="type"  align="center" 
        :formatter="userTypeFormatter">
      </el-table-column>
      
      <el-table-column label="status"  align="center"
        :formatter="statusFormatter">
        <!-- <template slot-scope="scope">
          {{ scope.row.status }}
        </template> -->
      </el-table-column>
      <el-table-column label="用户锁定状态"  align="center" :formatter="isLockedFormatter">
        <!-- <template slot-scope="scope">
          {{ scope.row.isLocked }}
        </template> -->
      </el-table-column>
      <el-table-column label="用户授权时间"  align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="最后一次登录时间"  align="center">
        <template slot-scope="scope">
          {{ scope.row.lastVisitDate }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="editRow(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="created_at" label="status" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="block">
      <el-pagination
       
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
        title="提示"
        :visible.sync="dialog.dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!-- <span>账户锁定状态：{{userIsLockedTitle}}</span> -->
        <span>账户锁定状态：</span>
        <el-switch
            v-model="dialog.userIsLocked"
            active-text="锁定"
            inactive-text="未锁定">
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCommonUserByPage,updateCommonUser } from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialog:{
            userId:null,
            userIsLockedTitle:'',
            userIsLocked: false,
            dialogVisible: false,
      },
      list: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      listLoading: true,
      userId: null,
      name: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    // 对话框关闭调用，点击对话框以外的任何区域时调用
    handleClose() {
        console.log(`对话框关闭`);
    },

    // 对话框确认被点击
    dialogConfirm() {
        var param = {
            id:this.dialog.userId,
            isLocked:this.dialog.userIsLocked
        }
        updateCommonUser(param).then(response => {
            
            if (response.resultCode == '0') {
                this.dialog.dialogVisible=false
                this.fetchData()
                this.$message({
                  message: '设置成功!',
                  type: 'success'
                })
            } else {
              this.$message({
                  message: '设置失败' + response.message,
                  type: 'success'
                })
            }
        })
        
    },
    // 点表格中的查询按钮
    editRow(row) {
        this.dialog.userId=row.id
        this.dialog.dialogVisible=true
        this.dialog.userIsLocked=row.isLocked
        this.dialog.userIsLockedTitle = row.isLocked ? "锁定":"未锁定"
        console.log(`编辑当前行: ` + JSON.stringify(row));
    },
    // 查询数据，表格上方查询按钮
    searchData() {
        console.log('click search button userId=' + this.userId + ', name=' + this.name)
        var param ={
            userId: this.userId,
            name: this.name,
            pageNum:this.pageNum, 
            pageSize:this.pageSize
        }
        this.fetchData(param)
    },

    // 刷新表格数据
    fetchData(param) {
      this.listLoading = true
      if (param == undefined) {
        param={
          pageNum:this.pageNum, 
          pageSize:this.pageSize
        }
      }
      console.log(`查询数据当前页: ` + JSON.stringify(param));
      getCommonUserByPage(param).then(response => {
        this.listLoading = false
        if (response.data) {
            this.list = response.data.list
            this.total = response.data.total
            this.pageNum = response.data.pageNum
            this.pageSize = response.data.pageSize
        }
      })
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      var param={
        pageNum:val, 
        pageSize:this.pageSize
      };
      console.log(`当前页: ` + JSON.stringify(param));
      this.fetchData(param)
    },

    // 用户类型翻译
    userTypeFormatter(row, column, cellValue, index) {
        // console.log('userTypeFormatter=' + row.type 
        //     + ',column=' + column 
        //     +',cellValue=' + cellValue 
        //     + ',index=' + index)
        if (row.type) {
            if (row.type == 4) {
                return '普通用户'
            } else if (row.type == 3) {
                return '培训学校用户'
            } else if (row.type == 2) {
                return '用户2'
            } else if (row.type == 1) {
                return '用户1'
            }
        }
    },
    
    // 用户状态翻译
    statusFormatter(row, column, cellValue, index) {
        // 状态 1 正常， 2 注册未激活， 3 冻结， 4 注销，
        // console.log('statusFormatter=' + row.status)
        if (row.status) {
            if (row.status === 4) {
                return '注销'
            } else if (row.status === 3) {
                return '冻结'
            } else if (row.status === 2) {
                return '注册未激活'
            } else if (row.status === 1) {
                return '正常'
            }
        }
    },

    // 用户锁定状态翻译
    isLockedFormatter(row, column, cellValue, index) {
        console.log('isLockedFormatter=' + index + (row.isLocked ? "锁定":"未锁定"))
        return row.isLocked ? "锁定":"未锁定"
    }
  }
}
</script>
<style>
    .el-row {
        margin-bottom: 20px;
    }
    .serchInput {
        margin: 10px;
    }
</style>
